<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :todoList="todoList"></Header>
      <List
        :todoList="todoList"
        :deleteTodo="deleteTodo"
        :changeDone="changeDone"
      ></List>
      <Footer
        :todoList="todoList"
        :changeAllDone="changeAllDone"
        :deleteAllDone="deleteAllDone"
      ></Footer>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"App",
})
</script>

<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from "vue";
import {nanoid} from "nanoid";
import Header from "./components/Header/index.vue";
import List from "./components/List/index.vue";
import Footer from "./components/Footer/index.vue";
import type {TodosType} from "*.vue";

let todoList = ref<TodosType>(JSON.parse(localStorage.getItem("todoList")as string) || [])
const changeDone = (id:string)=>{
     todoList.value = todoList.value.map((item)=>{
          if(item.id === id){
              item.done = !item.done
          }
          return item
      })
}


const deleteTodo = (id:string)=>{
    todoList.value = todoList.value.filter(item=>item.id !== id)
}

const changeAllDone = (isChecked:boolean)=>{
    todoList.value =  todoList.value.map(item=>{
        item.done = isChecked
        return item
    })
}

const deleteAllDone = ()=>{
    todoList.value = todoList.value.filter(item=>!item.done)
}

watch(todoList.value,()=>{
    localStorage.setItem("todoList",JSON.stringify(todoList.value))
},{deep:true})

</script>

<style>
/*base*/
body {
    background: #fff;
}

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
}

.btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
}

.btn:focus {
    outline: none;
}


/*app*/
.todo-container {
    width: 600px;
    margin: 0 auto;
}
.todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

</style>